<template>
    <view class="mch-diy-home">
        <view class="shop-bg" :style="[endStyle]">
            <view class="shop-mo"
                  :style="{ backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, .3), ${diyData.bg_type === 'gradient' ? 'white' :'rgba(0, 0, 0, .3)' })`}"
            ></view>
            <view class="btn-all dir-left-nowrap cross-center"
                  :style="{top: `${diyData.gk_top}rpx`,left: `${diyData.gk_left}rpx`}">
                <view class="box-grow-0 cross-center dir-left-nowrap"
                      @click="handleGz(isFavorite ? 'cancel_favorite': 'favorite')">
                    <image v-if="isFavorite" class="box-grow-0 gz-btn-icon" :src="diyData.love_pic"></image>
                    <image v-else class="box-grow-0 gz-btn-icon" :src="diyData.nolove_pic"></image>
                    <view class="box-grow-0 shop-pos-text"
                          :style="{color: diyData.gk_color,paddingLeft: `${diyData.gk_cen}rpx`}">
                        <template v-if="isFavorite == 1">已关注</template>
                        <template v-else>关注</template>
                    </view>
                </view>
                <view class="box-grow-0 cross-center dir-left-nowrap" v-if="diyData.service_type > 0" @click="handleKf"
                      :style="{marginLeft: `${diyData.gk_margin}rpx`}">
                    <image class="box-grow-0 kf-btn-icon" :src="diyData.tel_pic"></image>
                    <view class="box-grow-0 shop-pos-text"
                          :style="{color: diyData.gk_color,paddingLeft: `${diyData.gk_cen}rpx`}">客服
                    </view>
                </view>
            </view>
        </view>
        <view v-if="diyData.box_access_style === 'around'" class="dir-left-nowrap cross-center" :style="[boxStyle]">
            <image class="box-grow-0" :style="[logoStyle]" :src="mchData.cover_url"></image>
            <view class="box-grow-1 dir-top-nowrap main-center" :style="{marginLeft: `${diyData.basic_center}rpx`}">
                <view :style="[nameTextStyle,calcWidth]" class="t-omit shop-label" style="margin-bottom: 16rpx;display: block">
                    {{ mchData.name }}
                </view>
                <view :style="[placeTextStyle]" class="dir-left-nowrap line-padding">
                    <view class="box-grow-0" v-if="diyData.has_goods_num">商品：{{ mchData.goods_count }}</view>
                    <view class="box-grow-0" v-if="diyData.has_shop_num">已售：{{ mchData.order_goods_count }}</view>
                    <view class="box-grow-0" v-if="diyData.has_assess_num">{{ mchData.comment_count }}条评价</view>
                </view>
            </view>
        </view>
        <view v-if="diyData.box_access_style === 'down'" class="dir-top-nowrap cross-center" :style="[boxStyle]">
            <image class="box-grow-0" style="position: absolute;"
                   :style="[logoStyle,{top:diyData.box_placed_style == 2 ? `calc(-${diyData.logo_size / 2}rpx)` : `${diyData.basic_top}rpx`}]"
                   :src="mchData.cover_url"></image>
            <view :style="[nameTextStyle,{paddingTop:diyData.box_placed_style == 2 ? `calc(${diyData.logo_size / 2}rpx)` : `${diyData.logo_size}rpx`},calcWidth]"
                  style="text-align: center"
                  class="t-omit shop-label">
                {{ mchData.name }}
            </view>
            <view :style="[placeTextStyle]" class="dir-left-nowrap line-padding">
                <view class="box-grow-0" v-if="diyData.has_goods_num">商品：{{ mchData.goods_count }}</view>
                <view class="box-grow-0" v-if="diyData.has_shop_num">已售：{{ mchData.order_goods_count }}</view>
                <view class="box-grow-0" v-if="diyData.has_assess_num">{{ mchData.comment_count }}条评价</view>
            </view>
        </view>
    </view>
</template>

<script>

export default {
    name: 'mch-diy-home',
    props: {
        diyData: Object,
        mchData: Object,
        mchId: [Number, String]
    },
    data() {
        return {}
    },
    computed: {
        calcWidth() {
            let {
                box_access_style,
                basic_left,
                basic_center,
                logo_size,
                box_placed_style,
                basic_top,
                gk_top,
                gk_left,
                title_size
            } = this.diyData;
            let w = 24;
            if (box_placed_style == 3)
                w += 24;
            if (box_access_style === 'around') {
                w += basic_left + basic_center + logo_size;
                let t = box_placed_style == 2 ? 0 : 220;

                let first_top = t + basic_top - 12;
                let first_bottom = t + basic_top + title_size + 12;
                if (first_top < gk_top && first_bottom > gk_top) {
                    w += 750 - gk_left
                }
                return {maxWidth: `${750 > w ? 750 - w : 0}rpx`};
            } else {
                let first_top = 0;
                let first_bottom = 0;
                let c_height = 0;
                if (box_placed_style == 1) {
                    c_height = 310 - 90;
                }
                if (box_placed_style == 2) {
                    c_height = 310;
                }
                if (box_placed_style == 3) {
                    c_height = 310 - 102;
                }
                c_height += logo_size / 2;
                first_top = c_height + basic_top - 12;
                first_bottom = c_height + basic_top + title_size + 12;
                console.log(first_top,first_bottom,gk_top);
                if (first_top < gk_top && first_bottom > gk_top) {
                    w += (750 - gk_left) * 2;
                }
                return {maxWidth: `${750 > w ? 750 - w : 0}rpx`};
            }
        },
        isFavorite() {
            return this.mchData.is_favorite == 1;
        },
        endStyle() {
            let {has_bg, bg_pic, bg_color} = this.diyData;
            return has_bg == 1 ? {backgroundImage: `url(${bg_pic})`} : {backgroundColor: bg_color};
        },
        boxStyle() {
            let {box_radius, basic_top, basic_left, logo_size, box_placed_style, box_access_style, basic_center} = this.diyData;
            let style = {position: 'relative', zIndex: 2};
            if (box_placed_style == 1) {
                Object.assign(style, {
                    background: 'white',
                    padding: `${(box_access_style === 'down' ? basic_center: 0) + basic_top}rpx ${basic_left}rpx 24rpx`,
                    borderRadius: `${box_radius}rpx ${box_radius}rpx 0 0`,
                    top: `calc(220rpx - 310rpx)`,
                    marginBottom: `calc(220rpx - 310rpx)`,
                })
            } else if (box_placed_style == 2) {
                if (box_access_style === 'around') {
                    Object.assign(style, {
                        background: 'none',
                        padding: `0 ${basic_left}rpx`,
                        top: `calc(${basic_top}rpx - 310rpx)`,
                        marginBottom: `${-logo_size}rpx`,
                    })
                }
                if (box_access_style === 'down') {
                    Object.assign(style, {
                        top: 0,
                        marginBottom: 0,
                        background: 'white',
                        padding: `${basic_top}rpx ${basic_left}rpx 24rpx`,
                    })
                }
            } else if (box_placed_style == 3) {
                Object.assign(style, {
                    background: 'white',
                    padding: `${(box_access_style === 'down' ? basic_center: 0) + basic_top}rpx ${basic_left}rpx 24rpx`,
                    borderRadius: `${box_radius}rpx`,
                    boxShadow: '0 0 30rpx 0 rgba(0, 0, 0, 0.1)',
                    top: `calc(208rpx - 310rpx)`,
                    margin: `0 24rpx calc(208rpx - 310rpx + 30rpx)`
                })
            }
            return style;
        },
        logoStyle() {
            let {logo_size} = this.diyData;
            return {
                height: `${logo_size}rpx`,
                width: `${logo_size}rpx`,
                display: 'block',
                borderRadius: `20rpx`,
            }
        },
        nameTextStyle() {
            let {title_color, title_size} = this.diyData;
            return {color: title_color, fontSize: `${title_size}rpx`};
        },
        placeTextStyle() {
            let {place_color, place_size} = this.diyData;
            return {color: place_color, fontSize: `${place_size}rpx`};
        },
    },
    methods: {
        handleGz(value) {
            console.log(value);
            this.$request({
                url: this.$api.mch[value],
                method: 'POST',
                data: {
                    mch_id: this.mchId,
                },
            }).then(info => {
                if (info.code === 0) {
                    this.mchData = Object.assign({},this.mchData,{'is_favorite':value === 'favorite' ? 1 : 0 })
                }
                uni.showToast({title: info.msg, icon: 'none'});
            })
        },
        handleKf() {
            if(this.diyData.service_type == 1) {
                uni.navigateTo({url: `/pages/web/web?url=` + encodeURIComponent(this.mchData.web_service_url)});
            } else if(this.diyData.service_type == 2) {
                uni.makePhoneCall({phoneNumber: this.mchData.service_mobile});
            }
        },
    }
}
</script>

<style scoped lang="scss">
.mch-diy-home {
    position: relative;
    /* #ifdef MP-ALIPAY */
    z-index: -1;
    /* #endif  */
    .line-padding {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;

        > view {
            padding-left: 24#{rpx};
            white-space: nowrap;
            display: inline-block;
        }

        > view:first-child {
            padding-left: 0;
        }
    }

    .btn-all {
        position: absolute;
        z-index: 4;

        .gz-btn-icon {
            height: 30#{rpx};
            width: 28#{rpx};
        }

        .kf-btn-icon {
            height: 30#{rpx};
            width: 30#{rpx};
        }
    }

    .shop-bg {
        position: relative;
        width: 100vw;
        display: block;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 310#{rpx};

        .shop-mo {
            height: inherit;
            background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff);
        }
    }

    .shop-label {
        font-weight: bolder;
    }

    .shop-pos-text {
        color: white;
        font-size: 24#{rpx};
    }
}
</style>
